<template>
  <el-dialog
    title="训练结果"
    :visible.sync="dialogWordScore"
    width="600px"
    @close="init"
    class="word-read-score"
  >
    <div class="score-show">
      <div class="scoere-show-item">
        <div class="item-content">
          <span class="word">{{ checkedData.word_name }}</span>
          <AudioPlay
            class="paly-audio-word"
            :type="1"
            :audioSrc="baseURL + checkedData.audioURL"
            :ref="'audioPlay' + checkedData.word_id"
          ></AudioPlay>
        </div>
      </div>
      <div class="scoere-show-item scoere-show-item-paraphrase">
        <div class="item-content">
          <p
            v-for="(item, index) in checkedData.paraphrase.split('\n')"
            :key="index"
            class="table-text"
          >
            <span>{{ item }}</span>
          </p>
        </div>
      </div>
      <div
        class="scoere-show-item"
        v-if="checkedData.detail && checkedData.detail.length"
      >
        <div class="item-content">
          <div class="phonetic">
            [
            <span
              v-for="(item, index) in checkedData.detail.filter(
                (item) => item.subwords.length
              )"
              :key="index"
            >
              <span
                v-for="(item1, index1) in item.subwords"
                :key="index1"
                class="phonetic-text"
                :class="'green-color-text'"
                >{{ item1.subtext }}</span
              >
            </span>
            ]
            <!-- [<el-tooltip
              v-for="(item, index) in checkedData.detail.filter(
                (item) => item.subwords.length
              )"
              :key="index"
              class="item"
              effect="dark"
              :content="errType[item.is_err]"
              placement="bottom"
              :disabled="item.is_err == 0"
            > 
            <span
              class="phonetic-text"
              :class="item.score <= 60 ? 'red-color-text' : 'green-color-text'"
              >{{ item.phonetic}}</span
            ></el-tooltip>] -->
          </div>
        </div>
      </div>
      <!-- <div
        class="scoere-show-item"
        v-if="
          checkedData.detail &&
          checkedData.detail.stress &&
          checkedData.detail.stress.length > 0 &&
          checkedData.detail.stress.filter((item) => item.ref == 1).length > 0
        "
      >
        <div class="item-content item-syllable">
          <div class="mr5">重读音节:</div>
          <span
            class="mr10"
            v-for="(item, index) in checkedData.detail.stress.filter(
              (item) => item.ref == 1
            )"
            :key="index"
          >
            <span
              v-for="(item2, index2) in item.char.split('_')"
              :key="index2"
              class="phonetic-text-small"
              :class="item.score != 1 ? 'red-color-text' : 'green-color-text'"
              >{{ phoneme2phonetic(item2) }}</span
            >
          </span>
        </div>
      </div> -->
      <div class="scoere-show-item">
        <div class="item-content stu-score-item">
          <div class="audio-stu">
            <span class="audio-label">
              我的读音:
              <span v-if="checkedData.detail">
                
                <span
                  v-for="(item, index) in checkedData.detail.filter(
                    (item) => item.subwords.length
                  )"
                  :key="index"
                  
                >
                 [ <span
                    v-for="(item1, index1) in item.subwords"
                    :key="index1"
                    class="phonetic-text"
                    :class="
                      item1.score <= 8 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ item1.subtext }}</span
                  >]
                </span>
                
              </span>
            </span>
            <AudioPlay
              :type="2"
              :audioSrc="
                checkedData.student_sound_record_url
                  ? assetsURL + checkedData.student_sound_record_url
                  : checkedData.fileData
              "
              :ref="'audioPlay' + checkedData.word_id"
            ></AudioPlay>
          </div>
          <div class="score">
            <span>
              得分：
              <span class="score-num orange-color-text">{{
                checkedData.score
              }}</span>
              分
            </span>
          </div>
        </div>
      </div>
      <!-- <div class="scoere-show-item">
        <div class="item-content"></div>
      </div> -->

      <!-- <div class="scoere-show-item" v-if="checkedData.detail.stress">
        <label>重读音节检测结果:</label>
        <div class="item-content">
          <span v-for="(item, index) in checkedData.detail.stress" :key="index">
            {{ item.char }}
          </span>
        </div>
      </div> -->
    </div>
  </el-dialog>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
export default {
  data() {
    return {
      dialogWordScore: false,
      checkedData: {
        paraphrase: "",
      },
      //   音素音标对照表
      phoneme: [
        {
          lable: "ih",
          UK: "ɪ",
          US: "ɪ",
          //   cons
          type: "vowel",
        },
        {
          lable: "ax",
          UK: "ә",
          US: "ә",
          //   cons
          type: "vowel",
        },
        {
          lable: "oh",
          UK: "ɒ",
          US: "ɔ",
          //   cons
          type: "vowel",
        },
        {
          lable: "uh",
          UK: "ʊ",
          US: "ʊ",
          //   cons
          type: "vowel",
        },
        {
          lable: "ah",
          UK: "ʌ",
          US: "ʌ",
          //   cons
          type: "vowel",
        },
        {
          lable: "eh",
          UK: "e",
          US: "ɛ",
          //   cons
          type: "vowel",
        },
        {
          lable: "ae",
          UK: "æ",
          US: "æ",
          //   cons
          type: "vowel",
        },
        {
          lable: "iy",
          UK: "i:",
          US: "i",
          //   cons
          type: "vowel",
        },
        {
          lable: "er",
          UK: "ɜ:",
          US: "ɜ:",
          //   cons
          type: "vowel",
        },
        {
          lable: "ao",
          UK: "ɔ:",
          US: "ɔ",
          //   cons
          type: "vowel",
        },
        {
          lable: "ao r",
          UK: "",
          US: "ɔr",
          //   cons
          type: "vowel",
        },
        {
          lable: "uw",
          UK: "u:",
          US: "u",
          //   cons
          type: "vowel",
        },
        {
          lable: "y uw",
          UK: "ju:",
          US: "u",
          //   cons
          type: "vowel",
        },
        {
          lable: "aa",
          UK: "ɑ:",
          US: "ɑ",
          //   cons
          type: "vowel",
        },
        {
          lable: "aa r",
          UK: "",
          US: "ɑr",
          //   cons
          type: "vowel",
        },
        {
          lable: "ey",
          UK: "eɪ",
          US: "e",
          //   cons
          type: "vowel",
        },
        {
          lable: "ay",
          UK: "aɪ",
          US: "aɪ",
          //   cons
          type: "vowel",
        },
        {
          lable: "oy",
          UK: "ɔɪ",
          US: "ɔɪ",
          //   cons
          type: "vowel",
        },
        {
          lable: "aw",
          UK: "aʊ",
          US: "aʊ",
          //   cons
          type: "vowel",
        },
        {
          lable: "ow",
          UK: "әʊ",
          US: "oʊ",
          //   [o]/[]
          //   cons
          type: "vowel",
        },
        {
          lable: "ia",
          UK: "ɪə",
          US: "ɪə",
          //   cons
          type: "vowel",
        },
        {
          lable: "ih r",
          UK: "",
          US: "ɪr",
          //   cons
          type: "vowel",
        },
        {
          lable: "ea",
          UK: "eə",
          US: "",
          //   cons
          type: "vowel",
        },
        {
          lable: "eh r",
          UK: "",
          US: "ɛr",
          //   cons
          type: "vowel",
        },
        {
          lable: "ua",
          UK: "ʊә",
          US: "",
          //   cons
          type: "vowel",
        },
        {
          lable: "uh r",
          UK: "",
          US: "ʊr",
          //   cons
          type: "vowel",
        },
        {
          lable: "p",
          UK: "p",
          US: "p",
          type: "cons",
        },
        {
          lable: "k",
          UK: "k",
          US: "k",
          type: "cons",
        },
        {
          lable: "m",
          UK: "m",
          US: "m",
          type: "cons",
        },
        {
          lable: "s",
          UK: "s",
          US: "s",
          type: "cons",
        },
        {
          lable: "f",
          UK: "f",
          US: "f",
          type: "cons",
        },
        {
          lable: "sh",
          UK: "ʃ",
          US: "ʃ",
          type: "cons",
        },
        {
          lable: "t s",
          UK: "ts",
          US: "ts",
          type: "cons",
        },
        {
          lable: "b",
          UK: "b",
          US: "b",
          type: "cons",
        },
        {
          lable: "g",
          UK: "ɡ",
          US: "ɡ",
          type: "cons",
        },
        {
          lable: "n",
          UK: "n",
          US: "n",
          type: "cons",
        },
        {
          lable: "z",
          UK: "z",
          US: "z",
          type: "cons",
        },
        {
          lable: "v",
          UK: "v",
          US: "v",
          type: "cons",
        },
        {
          lable: "zh",
          UK: "ʒ",
          US: "ʒ",
          type: "cons",
        },
        {
          lable: "d z",
          UK: "dz",
          US: "dz",
          type: "cons",
        },
        {
          lable: "t",
          UK: "t",
          US: "t",
          type: "cons",
        },
        {
          lable: "l",
          UK: "l",
          US: "l",
          type: "cons",
        },
        {
          lable: "ng",
          UK: "ŋ",
          US: "ŋ",
          type: "cons",
        },
        {
          lable: "th",
          UK: "θ",
          US: "θ",
          type: "cons",
        },
        {
          lable: "w",
          UK: "w",
          US: "w",
          type: "cons",
        },
        {
          lable: "ch",
          UK: "tʃ",
          US: "tʃ",
          type: "cons",
        },
        {
          lable: "t r",
          UK: "tr",
          US: "tr",
          type: "cons",
        },
        {
          lable: "d",
          UK: "d",
          US: "d",
          type: "cons",
        },
        {
          lable: "r",
          UK: "r",
          US: "r",
          type: "cons",
        },
        {
          lable: "hh",
          UK: "h",
          US: "h",
          type: "cons",
        },
        {
          lable: "dh",
          UK: "ð",
          US: "ð",
          type: "cons",
        },
        {
          lable: "y",
          UK: "j",
          US: "j",
          type: "cons",
        },
        {
          lable: "jh",
          UK: "dʒ",
          US: "dʒ",
          type: "cons",
        },
        {
          lable: "d r",
          UK: "dr",
          US: "dr",
          type: "cons",
        },
      ],
      //音素发音错误类型
      errType: {
        0: "发音结果正确",
        1: "多读",
        2: "漏读",
        3: "错读",
        4: "没有浊化",
      },
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    phoneme2phonetic(phoneme) {
      let searchData = this.phoneme.filter((item) => {
        return item.lable == phoneme || item.lable.replace(" ", "") == phoneme;
      });
      if (searchData.length > 0) {
        return this.$store.getters.isBritish == 1
          ? searchData[0].UK
          : searchData[0].US;
      }
      return "";
    },
    findPhoneScore(phoneme) {
      let data = this.checkedData.detail.phn.filter((item) => {
        return item.lab == phoneme;
      });
      console.log(data);
    },
    init() {
      this.checkedData = {
        paraphrase: "",
      };
    },
    show(data) {
      console.log(data, "data");
      this.checkedData = data;
      this.dialogWordScore = true;
    },
  },
};
</script>
